<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Hyperlinks</title>
    <link rel="stylesheet" type="text/css" href="style.css#frag"/>
</head>
<body>
<div>
    <h1>Hyperlinks</h1>

    <p>Here is a link to another place in this spine item: <a href="#local_ref">link 1</a></p>

    <div>
      <p id="local_ref">This is a relative link target</p>
    </div>
    <p>Here is a link to a different spine item: <a href="link_target.xhtml">link 2</a></p>
    
    <p>Here is a link to a different spine item element: <a href="link_target.xhtml#target">link 3</a></p>
     
    <p>Here is an external link: <a href="http://www.barnesandnoble.com/">link 4</a></p>

    <p>Here is a link in plain text http://www.barnesandnoble.com </p>
    <p>Here is a link to an image <img src="images/sample.jpg" alt="Koala"></img> </p>
    <p>Here is a link to an image that includes a fragment <img src="images/sample.jpg#hello" alt="Sample"></img> </p>
    <p>Here is a link to an image with no src <img src="" alt="Koala"></img> </p>
    <p>Here is a link with an unrecognized scheme <a href="wakawaka://wwww.thisdomaindoesntexist.org/books/media/sample.m4a">Media</a></p>
    <p>Here is a link to svg symbol <a href="svg_links.xhtml#redCircle">svg</a></p>
    <p>Here is a link to svg clip path <a href="svg_links.xhtml#hex-mask">svg</a></p>
    <p>These links are added to invoke the Max location code.</p>
    <ul>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
        <li><a href="http://www.barnesandnoble.com/">link 4</a></li>
    </ul>
</div>
</body>
</html>
